import React from 'react';
import { observer, inject } from "mobx-react";
import { Modal, Input, Empty } from 'antd';

const Search = Input.Search;

const styles = {
    search: {
        width: '45%',
        paddingBottom: '14px'
    },
    content: {
        maxHeight: '380px',
        overflowY: 'auto',
        overflowX: 'hidden',
        border: '1px solid #000'
    },
    title: {
        marginTop: '4px',
        marginBottom: '2px',
        paddingLeft: '.8em'
    },
    wrapItem: {
        borderBottom: '1px solid #d7d7d7'
    },
    item: {
        cursor: 'pointer',
        fontSize: '20px',
        display: 'flex',
        alignItems: 'center',
        paddingLeft: '2em'
    },
    text: {
        fontSize: '14px',
        paddingLeft: '20px',
        color: '#a7a7a7',
        flexShrink: '0'
    },
    empty: {
        padding: '20px 0'
    }
}

@inject(({ taskState }) => ({ taskState }))
@observer
class TaskInfoModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeIndex: props.value
        }

    }

    componentWillReceiveProps(nextProps) {
        // console.log('---TaskInfoModal componentWillReceiveProps---');
        this.setState({ activeIndex: nextProps.value });
    }

    onSearch = (v) => {
        const { getLinkProjectList } = this.props.taskState;
        getLinkProjectList(v);
    }

    handleCancel = () => {
        const { onCancel } = this.props;
        this.onSearch('');
        onCancel();
    }

    handleOk = () => {
        const { activeIndex } = this.state;
        const { onOk, onCancel, taskState: { linkProjectList } } = this.props;
        let project = {};
        let stage = {};
        if (activeIndex && !/undefined/.test(activeIndex)) {
            const [projectid, stageid] = activeIndex.split('**');
            project = linkProjectList.find(v => v.recid === projectid);
            stage = project.stages.find(v => v.stageid === stageid * 1);
        }
        onOk(project, stage);
        onCancel();
    }

    renderSelectItem = (sels, projectid) => {
        const { activeIndex } = this.state;
        return sels.map((v, i) => (
            <div
                className="hovergray"
                key={i}
                style={styles.item}
                onClick={() => this.setState({
                    activeIndex: `${projectid}**${v.stageid}` === activeIndex ? 'undefined**undefined' : `${projectid}**${v.stageid}`
                })}
            >
                {
                    activeIndex === `${projectid}**${v.stageid}` ?
                        <span className="mdi mdi-check-circle mainColor" /> :
                        <span className="mdi mdi-checkbox-blank-circle-outline textColor" />
                }
                <span style={styles.text}>{v.stagename}</span>
                {v.clients && v.clients.length ? <span style={styles.text}>委托人: {v.clients.join(';')}</span> : null}
            </div>
        ))
    }

    render() {
        const { show } = this.props;
        const { linkProjectList } = this.props.taskState;
        return (
            <Modal
                title="选择项目阶段"
                visible={show}
                okText="确定"
                cancelText="取消"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
            >
                <div style={styles.search}>
                    <Search
                        key={!show ? Math.random() : 'search'}
                        placeholder="请输入项目名称"
                        enterButton="搜索"
                        onSearch={this.onSearch}
                    />
                </div>
                <div style={styles.content} className="borderColor">
                    {linkProjectList.length ? linkProjectList.map(v => {
                        return (
                            <div key={v.recid} style={styles.wrapItem}>
                                <h3 style={styles.title}>{v.recname}</h3>
                                {this.renderSelectItem(v.stages, v.recid)}
                            </div>
                        )
                    }) : <div style={styles.empty}><Empty description={'无符合的项目'} /></div>}
                </div>
            </Modal>
        );
    }
}

export default TaskInfoModal